<template>
  <div>
    <el-form
      :inline="true"
      label-position="right"
      label-width="100px"
      size="small"
      class="filter-form-inline"
    >
      <el-row
        :gutter="40"
        style="margin-left: 0px; margin-right: 0px"
      >
        <el-col
          :lg="24"
          :xs="4"
          style="padding-left: 0;padding-right: 0"
        >
          <item-title title="基本信息" />
        </el-col>
        <el-col
          :lg="8"
          :xs="4"
        >
          <el-form-item label="终端编号：">
            <span>{{ formData?.terminalNo||'无' }}</span>
          </el-form-item>
        </el-col>
        <el-col
          :lg="8"
          :xs="4"
        >
          <el-form-item label="简称：">
            <span>{{ formData?.terminalAlias||'无' }}</span>
          </el-form-item>
        </el-col>
        <el-col
          :lg="8"
          :xs="4"
        >
          <el-form-item label="终端类型：">
            <span>{{ getLabel('app_mode', formData?.terminalType) }}</span>
          </el-form-item>
        </el-col>
        <el-col
          :lg="8"
          :xs="4"
        >
          <el-form-item
            label="所在地区："
            class="item_col"
          >
            <span>{{ formData?.provinceName }}/{{ formData?.cityName }}/{{ formData?.areaName }}</span>
          </el-form-item>
        </el-col>
        <el-col
          :lg="8"
          :xs="4"
        >
          <el-form-item
            label="所在街道："
            class="item_col"
          >
            <span>{{ formData?.streetName }}</span>
          </el-form-item>
        </el-col>
        <el-col
          :lg="8"
          :xs="4"
        >
          <el-form-item label="详细地址：">
            <span>{{ formData?.address }}</span>
          </el-form-item>
        </el-col>
        <el-col
          :lg="8"
          :xs="4"
        >
          <el-form-item label="属性：">
            <span v-if="formData?.terminalType === 'first_terminal'">
              {{ getLabel('first_terminal', formData?.childProperty) }}</span>
            <span v-if="formData?.terminalType === 'second_terminal'">
              {{ getLabel('second_terminal', formData?.childProperty) }}</span>
            <span v-if="formData?.terminalType === 'third_terminal'">
              {{ getLabel('third_terminal', formData?.childProperty) }}</span>
          </el-form-item>
        </el-col>
        <el-col
          v-if="formData?.terminalType === 'first_terminal'"
          :lg="8"
          :xs="4"
        >
          <el-form-item label="等级：">
            <span v-if="formData?.terminalLevel">{{ getLabel('classification_standard', formData?.terminalLevel) }}</span>
            <span v-else>无</span>
          </el-form-item>
        </el-col>
        <el-col
          v-if="formData?.terminalType === 'first_terminal'"
          :lg="8"
          :xs="4"
        >
          <el-form-item label="年门诊量：">
            <span>{{ formData?.cureNum }}</span>万人次
          </el-form-item>
        </el-col>
        <el-col
          :lg="8"
          :xs="4"
        >
          <el-form-item label="营销区域：">
            <span>{{ formData?.saleAreaName }}</span>
          </el-form-item>
        </el-col>
        <el-col
          :lg="8"
          :xs="4"
        >
          <el-form-item label="创建时间：">
            <span> {{ dateFormat("yyyy-mm-dd HH:MM:SS",formData?.createdAt) }} </span>
          </el-form-item>
        </el-col>
        <el-col
          :lg="8"
          :xs="4"
        >
          <el-form-item
            label="联系人："
            class="item_col"
          >
            <span>{{ formData?.contacts||'无' }}</span>
          </el-form-item>
        </el-col>
        <el-col
          :lg="8"
          :xs="4"
        >
          <el-form-item
            label="联系电话："
            class="item_col"
          >
            <span>{{ formData?.tel||'无' }}</span>
          </el-form-item>
        </el-col>
        <el-col
          :lg="8"
          :xs="4"
        >
          <el-form-item
            label="创建人："
            class="item_col"
          >
            <span>{{ formData?.creatorName }}</span>
          </el-form-item>
        </el-col>
        <el-col
          :span="24"
          style="padding-left: 0;padding-right: 0"
        >
          <item-title title="资质信息" />
        </el-col>
        <el-col :lg="24">

          <filesUploadView
            v-if="formData?.qualifications&&formData?.qualifications.length"
            ref="refFile"
            :list="formData?.qualifications"
            disabled
          />

          <div v-else>
            <el-empty description="该终端未上传资质" />
          </div>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { inject, reactive, toRefs, watch } from 'vue'

export default {
  name: 'TerminalDetails',
  props: {
    id: {
      type: Number,
      default: 0,
    },
    detail: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, context) {
    const api = inject('api')
    var reactiveData = reactive({
      formData: props.detail,
    })
    // 获取详情
    const handlDetail = (id) => {
      api.terminal.TERMINAL_DETAIL(id).then((res) => {
        if (res.code === 0) {
          reactiveData.formData = res.data.terminal
        }
      })
    }
    watch(
      () => props.id,
      (newval, oldval) => {
        if (newval) {
          handlDetail(newval)
        }
      },
      { immediate: true }
    )
    watch(
      () => props.detail,
      (newval, oldval) => {
        if (newval) {
          reactiveData.formData = newval
        }
      },
      { immediate: true }
    )
    return {
      ...toRefs(reactiveData),
    }
  },
}
</script>

<style scoped lang="scss">
:deep(.item_col) {
  width: 100%;

  .el-form-item__content {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
</style>
